<template>
  <Header />
  <div class="details-container">
    <div class="details-header">
      <div class="header-left">
        <img src="@/assets/images/2.png" alt="Logo" class="logo" />
        <h1 class="shop-name">美的京东自营旗舰店</h1>
      </div>
      <div class="header-right">
        <button class="btn">关注店铺</button>
        <button class="btn">联系客服</button>
      </div>
    </div>
    <!--    <div class="details-content">-->
    <!--    </div>-->
    <ImageDeails />
    <comment />
  </div>
  <Footer />
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.details-container {
  max-width: 74.375rem;
  margin: 1rem auto;

  .details-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    //background: #ffffff;
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;

    .header-left {
      display: flex;
      align-items: center;
      gap: 0.5rem;

      .logo {
        width: 1.75rem;
        height: 1.75rem;
        border-radius: 50%;
      }

      .shop-name {
        font-size: 1.125rem;
        font-weight: 600;
      }
    }

    .header-right {
      .btn {
        background: #fff;
        border: 0.0625rem solid #ccc;
        border-radius: 0.25rem;
        padding: 0.4rem 0.8rem;
        margin-left: 0.5rem;
        font-size: 0.875rem;
        cursor: pointer;

        &:hover {
          background: #f5f5f5;
        }
      }
    }
  }

  //.details-content {
  //  display: flex;
  //  margin: 1rem auto;
  //  gap: 1rem;
  //}
}
</style>
